<template>
  <div class="main">
    <div class="header">
      <Search :form="form" @Search="search"></Search>
      <addFrom
        @submitForm="submitForm"
        :form="addForm"
        :msg="'新增用户'"
        :title="'新增用户'"
      ></addFrom>
    </div>
    <el-alert
      :title="'共 ' + userObject.counts + ' 条记录'"
      type="info"
      show-icon
      :closable="false"
    >
    </el-alert>
    <userList
      @pageSizes="pageSizes"
      @page="page"
      :tableData="userList"
      :userObject="userObject"
      @remove="remove"
      @editSubmit="search()"
    ></userList>
  </div>
</template>

<script>
import Search from '@/components/user/search.vue'
import addFrom from '@/components/user/addFrom.vue'
import userList from '@/components/user/userList.vue'
import { list, add, remove } from '@/api/base/users'

export default {
  components: { Search, addFrom, userList },
  data () {
    return {
      userList: [],
      form: {
        page: 1,
        pagesize: 10,
        username: ''
      },
      addForm: {
        avatar: '',
        email: '',
        introduction: '',
        password: '',
        permission_group_id: null,
        phone: '',
        role: '',
        username: ''
      },
      userObject: {}
    }
  },
  created () {
    this.search()
  },
  methods: {
    async search (form) {
      const res = await list(form)
      this.userObject = res.data
      this.userList = res.data.list
    },
    async submitForm (form) {
      await add(form)
      this.$message.success('创建成功')
      this.search()
      this.addForm = {
        avatar: '',
        email: '',
        introduction: '',
        password: '',
        permission_group_id: null,
        phone: '',
        role: '',
        username: ''
      }
    },
    page (page) {
      this.form.page = page
      this.search(this.form)
    },
    pageSizes (pagesize) {
      this.form.pagesize = pagesize
      this.search(this.form)
    },
    async remove (id) {
      await remove(id)
      this.search()
    }
  }
}
</script>

<style scoped lang="scss">
.main {
  margin: 20px;
  padding: 20px;
  background-color: #fff;
  .header {
    display: flex;
    justify-content: space-between;
  }
}
</style>
